<!-- 借书信息 -->
<template>
    <div>
        <div style="background-color: white;padding-top: 30px;padding-bottom: 80px;">
            <div style="margin: 30px;">
                姓名：<el-input placeholder="姓名" size="large" style="width: 200px;padding-right: 20px;" />
                借书时间：<el-input placeholder="借书时间" size="large" style="width: 200px;padding-right: 20px;" />
                <el-button link type="primary">搜索</el-button>
                <el-button link type="primary">重置</el-button>
                <el-button link type="success" style="float: right;margin-right: 30px;" @click="dialogVisible = true">新增</el-button>
            </div>
            <div style="margin:15px;padding: 10px;">
                <el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%"
                    :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" size="medium">
                    <el-table-column type="index" width="100" label="编号" />
                    <el-table-column property="name" label="姓名" />
                    <el-table-column property="gender" label="性别" />
                    <el-table-column property="address" label="详细地址" />
                    <el-table-column property="phone" label="电话" />
                    <el-table-column property="idNumber" label="微信" />
                    <el-table-column property="amount" label="借阅数目" />
                    <el-table-column property="date" label="借阅时间" />
                    <el-table-column fixed="right" label="操作">
                        <template #default>
                            <el-button link type="success" size="small" @click="dialogVisible = true">修改</el-button>
                            <el-button link type="danger" size="small" @click="open">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页组件 -->
                <div style="float: right;padding-top: 20px;">
                    <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
                </div>
            </div>
        </div>
        <!-- 编辑框 -->
        <el-dialog v-model="dialogVisible" title="用户信息" width="30%">
            <el-form :model="tableData">
                <el-form-item label="姓名：">
                    <el-input />
                </el-form-item>
                <el-form-item label="性别：">
                    <el-select placeholder="请选择性别">
                        <el-option label="男" />
                        <el-option label="女" />
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址：">
                    <el-input />
                </el-form-item>
                <el-form-item label="电话：">
                    <el-input />
                </el-form-item>
                <el-form-item label="微信：">
                    <el-input />
                </el-form-item>
                <el-form-item label="借阅数目：">
                    <el-input />
                </el-form-item>
                <el-form-item label="借书时间：">
                    <el-input />
                </el-form-item>
                </el-form>
            <template #footer>
                <span>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { ElTable, ElMessage, ElMessageBox } from 'element-plus'

interface User {
    // 姓名
    name: string
    // 性别
    gender: string
    // 详细地址
    address: string
    // 电话
    phone: string
    // 微信
    idNumber: string
    // 借阅数目
    amount: string
    // 借阅时间
    date: string
}

const currentRow = ref()
const singleTableRef = ref<InstanceType<typeof ElTable>>()

const tableData: User[] = [
    {
        name: '李峰',
        gender: '男',
        address: '北京市XXX号',
        phone: '100XXXXXXXX',
        idNumber: 'wei*******01',
        amount: '28本',
        date: '2023-07-31',
    },
    {
        name: '天一',
        gender: '男',
        address: '北京市XXX号',
        phone: '100XXXXXXXX',
        idNumber: 'wei*******02',
        amount: '26本',
        date: '2023-07-31',
    },
    {
        name: '张麻',
        gender: '男',
        address: '北京市XXX号',
        phone: '100XXXXXXXX',
        idNumber: 'wei*******03',
        amount: '19本',
        date: '2023-08-31',
    },
    {
        name: '王武',
        gender: '男',
        address: '北京市XXX号',
        phone: '100XXXXXXXX',
        idNumber: 'wei*******04',
        amount: '23本',
        date: '2023-08-31',
    },
    {
        name: '李花',
        gender: '男',
        address: '北京市XXX号',
        phone: '100XXXXXXXX',
        idNumber: 'wei*******05',
        amount: '16本',
        date: '2023-08-31',
    },
    {
        name: '江涛',
        gender: '男',
        address: '北京市XXX号',
        phone: '100XXXXXXXX',
        idNumber: 'wei*******06',
        amount: '12本',
        date: '2023-08-31',
    }
]

const dialogVisible = ref(false)
const open = () => {
  ElMessageBox.confirm(
    '确定要删除此条记录么?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
</script>